<script>
import { createNamespacedHelpers } from 'vuex'
import PostItem from './post-item'
import EmptyTips from '@/components/empty-tips'

const { mapState, mapActions } = createNamespacedHelpers('Community')

export default {
  name: 'my-post',
  components: { PostItem, EmptyTips },
  computed: { ...mapState(['myPosts', 'myHasNext']) },
  methods: {
    ...mapActions(['getMyPosts', 'getMoreMyPosts', 'deletePost']),

    handleRefresh() {
      wx.showLoading({ title: '', mask: true })
      this.getMyPosts().finally(() => wx.hideLoading())
    },
    handleGetMore() {
      if (this.myHasNext) {
        wx.showLoading()
        this.getMoreMyPosts().finally(() => wx.hideLoading())
      }
    },

    handleDelete(id) {
      wx.showModal({
        title: '提示',
        content: '是否删除该动态?',
        success: res => {
          if (res.confirm) {
            wx.showLoading({ title: '', mask: true })
            this.deletePost(id).finally(() => wx.hideLoading())
          }
        }
      })
    }
  },
  mounted() {
    this.getMyPosts()
  }
}
</script>

<template>
  <div class="my-post">
    <scroll-view
      class="post-view"
      scroll-y
      :upper-threshold="-50"
      :lower-threshold="-50"
      @scrolltoupper="handleRefresh"
      @scrolltolower="handleGetMore"
    >
      <post-item
        v-for="v in myPosts"
        :key="v.id"
        :data="v"
        :handleDelete="handleDelete"
      />

      <empty-tips v-if="!myPosts.length" text="您还没有发布动态." />
    </scroll-view>
  </div>
</template>

<style lang="scss" scoped>
.my-post {
  height: 100vh;
  background-color: $main-background-color;
  .post-view {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 20px 10px;
  }
}
</style>
